<template>
	<view class="settle-container">
		<!-- 单选框 -->
    <label class="radio">
      <radio color="#ff3f34" :checked="fullCheck" @click="changeAllState" /><text>全选</text>
    </label>
    <!-- 合计价格 -->
    <view class="total-price">
      合计：
      <text>￥{{priceTotal}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="over" @click="settlement">
      结算({{ checkedTotal }})
    </view>
	</view>
</template>

<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		data() {
			return {
        // 倒计时秒数
				secends: 3,
        // 定时器名字
        timer: null
			};
		},
    computed: {
      ...mapGetters('cart', ['checkedTotal', 'total', 'priceTotal']),
      ...mapGetters('user', ['addressInfo']),
      ...mapState('user', ['token']),
      fullCheck() {
        return this.checkedTotal === this.total
      }
    },
    methods: {
      ...mapMutations('cart', ['updateAllState']),
      ...mapMutations('user', ['updateRedirectInfo']),
      changeAllState() {
        this.updateAllState(!this.fullCheck)
      },
      // 点击结算按钮
      settlement() {
        // 判断用户是否有勾选商品
        if (!this.checkedTotal) return uni.$showMsg('请勾选商品!')
        // 判断用户是否添加收货地址
        if (!this.addressInfo) return uni.$showMsg('请选择收货地址!')
        // 判断用户是否登录
        if (!this.token) return this.delayNavigate()
      },
      // 倒计时跳转到登录页面
      showTips(n) {
        uni.showToast({
          title: '请登录' + n + '秒后跳转到登录页!',
          icon: 'none',
          mask: true,
          duration: 1500
        })
      },
      // 延迟导航到my页面
      delayNavigate() {
        this.secends = 3
        this.showTips(this.secends)
   
        this.timer = setInterval(() => {
          // 如果倒计时等于0，停止定时器并跳转到my页面
          if (this.secends <= 0) {
            clearInterval(this.timer)
            uni.switchTab({
              url: '/pages/my/my',
              success:() => {
                this.updateRedirectInfo({
                  // 跳转的方式
                  openType: 'switchTab',
                  // 从哪个页面跳转过去
                  from: '/pages/cart/cart'
                })
              }
            })
            return
          }
          this.secends--
          this.showTips(this.secends)
        }, 1000)
      }
    }
	}
</script>

<style lang="scss">
.settle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  .radio {
    display: flex;
    align-items: center;
  }
  .total-price {
    text {
      color: #FF3F34;
      font-size: 14px;
      font-weight: 700;
    }
  }
  .over {
    min-width: 100px;
    height: 100%;
    line-height: 50px;
    padding: 0 10px;
    text-align: center;
    color: #fff;
    background-color: #ff3f34;
  }
}
</style>
